<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<title>商品列表</title>
	<link rel="stylesheet" href="../css/mui.min.css" />
	<link rel="stylesheet" href="../css/common.css" />
	<link rel="stylesheet" href="../iconfont/iconfont.css" />
	<style>
		.search-screen input[type=radio], .search-screen input[type=checkbox] {
			display: none;
		}
		.search-screen strong + label {
			color: #ff5000;
			font-size: 13px;
		}
		/*搜索下拉-筛选-价格区间*/
		.interval-input-text {
			width: 25%!important;
			height: 30px!important;
			background: #F5F5F5!important;
			border-radius: 10px!important;
			padding: 0 !important;
		}
		.search-interval input[type=radio] + span {
			width: 100%;
			border-radius: 5px;
			color: #fff!important;
			background: #F5F5F5;
		}
		.search-interval input[type=radio] + span a{color: #000;}
		.search-interval input[type=radio] + span a:last-child{font-size: 13px;}
		.search-interval input[type=radio]:checked + span {
			background: #ff5000!important;
		}
		.search-interval input[type=radio]:checked + span a{color: #fff;}
		/*搜索下拉-筛选-折扣服务*/
		.search-discount input[type=checkbox] + span {
			border-radius: 5px;
			background: #F5F5F5;
			padding: 5px 25px;
			display: inline-block;
			margin-top: 5px!important;
		}
		.search-discount input[type=checkbox]:checked + span {
			background: #ff5000!important;
			color: #fff!important;
		}
		/*搜索下拉-筛选-分类*/
		.search-category input[type=radio] + span {
			border-radius: 5px;
			background: #F5F5F5;
			padding: 5px 25px;
			display: inline-block;
			margin-top: 5px!important;
		}
		.search-category input[type=radio]:checked + span {
			background: #ff5000!important;
			color: #fff!important;
		}
		/*重置按钮 */
		.search-reset input[type=reset] {
			border-radius: 15px!important;
			padding: 3px 25px;
			color: #ff5000;
			background: #fff;
			border-color: #ff5000;
			margin-bottom: 50px;
		}
		.search-reset input[type=reset]:active {
			background: #ddd!important;
			color: #ff6000!important;
		}
		.category {
			display: inline-block;
		}
	</style>
</head>
<body class="white">
	<!--商品列表 下拉-筛选-->
	<div class="white search search-screen">
		<form>
			<!--价格区间-->
			<div class="pad-v  pad-h-md search-interval">
				<div class="mui-row">
					<span class="mui-col-xs-4"><strong>价格区间(元)</strong></span>
					<input type="number" name="min" class="mui-col-xs-3 no-bdr pad-v-sm mui-text-center interval-input-text no-active price-min"/>
					<span class="mui-col-xs-1 mui-text-center icon x2">-</span>
					<input type="number" name="max" class="mui-col-xs-3 no-bdr pad-v-sm mui-text-center interval-input-text no-active price-max"/>
				</div>
			</div>
			<!--分类-->
			<div class="mui-row pad-h-md pad-v search-category">
				<div class="mui-col-xs-12">
					<span>
						<strong>分类：</strong>
						<label class="text-red mui-pull-right choosen" style="margin-top: -10px;">
							<input name="category" type="radio" value="" checked="checked" />
							<span>所有分类</span>
						</label>
					</span>
				</div>
				<div class="mui-col-xs-12 categories">
				</div>
			</div>
			<div class="pad-v-md"></div>
			<!--重置按钮-->
			<div class="pad-h-md search-reset mui-text-center">
				<input type="reset" />
			</div>
			<!--提交按钮-->
			<div class="search-submit pad-h-md">
				<button type="button" class="mui-btn mui-btn-block mui-btn-danger btn-submit">确定</button>
			</div>
			<div class="pad-v-md"></div>
		</form>
	</div>
	
	<!-- 商品模板 开始 -->
	<script type="text/template" id="tpl-template">
		{{each data as item}}
		<div class="category mui-col-xs-12" data-id="{{item.id}}">
			<label class="choosen">
				<input name="category" type="radio" value="{{item.id}}" />
				<span>{{item.name}}</span>
			</label>
		</div>
			{{each item.child as son}}
			<div class="category" data-id="{{item.id}}">
				<label class="choosen">
					<input name="category" type="radio" value="{{son.id}}" />
					<span>{{son.name}}</span>
				</label>
			</div>
			{{/each}}
		{{/each}}
	</script>
	<!-- 商品模板 结束 -->
	
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.ba-bbq.min.js"></script>
	<script type="text/javascript" src="../js/template.js"></script>
	<script type="text/javascript" src="../js/app.js"></script>
	<script type="text/javascript" src="product.search.scroll.filter.js" ></script>
</body>
</html>